<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>智慧物业管理系统</title>
    <!--    <link rel="stylesheet" th:href="@{/css/login.css}">-->
    <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
    <script th:ssrc="@{/lib/layui/layui.js}" charset="utf-8"></script>
</head>
<style>
    :root {
        /* COLORS */
        --white: #e9e9e9;
        --gray: #333;
        --blue: #0367a6;
        --lightblue: #008997;

        /* RADII */
        --button-radius: 0.7rem;

        /* SIZES */
        --max-width: 758px;
        --max-height: 420px;

        font-size: 16px;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
        Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    }

    body {
        align-items: center;
        background-color: var(--white);
        background: url("https://img.zcool.cn/community/01797d5b19fd63a80121bbeca81ce1.jpg@1280w_1l_2o_100sh.jpg");
        /* 决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。 */
        /* https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-attachment */
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        display: grid;
        height: 100vh;
        place-items: center;
    }

    .form__title {
        font-weight: 300;
        margin: 0;
        margin-bottom: 1.25rem;
    }

    .link {
        color: var(--gray);
        font-size: 0.9rem;
        margin: 1.5rem 0;
        text-decoration: none;
    }

    .container {
        background-color: var(--white);
        border-radius: var(--button-radius);
        box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25),
        0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
        height: var(--max-height);
        max-width: var(--max-width);
        overflow: hidden;
        position: relative;
        width: 100%;
    }

    .container__form {
        height: 100%;
        position: absolute;
        top: 0;
        transition: all 0.6s ease-in-out;
    }

    .container--signin{
        left: 0;
        opacity: 0;
        width: 50%;
        z-index: 1;
    }

    .container.right-panel-active .container--signin{
        animation: show 0.6s;
        opacity: 1;
        transform: translateX(100%);
        z-index: 5;
    }

    .container--signup {
        left: 0;
        width: 50%;
        z-index: 2;
    }

    .container.right-panel-active .container--signup {
        transform: translateX(100%);
    }

    .container__overlay {
        height: 100%;
        left: 50%;
        overflow: hidden;
        position: absolute;
        top: 0;
        transition: transform 0.6s ease-in-out;
        width: 50%;
        z-index: 100;
    }

    .container.right-panel-active .container__overlay {
        transform: translateX(-100%);
    }

    .overlay {
        background-color: var(--lightblue);
        background: url("https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_1280.jpg");
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        height: 100%;
        left: -100%;
        position: relative;
        transform: translateX(0);
        transition: transform 0.6s ease-in-out;
        width: 200%;
    }

    .container.right-panel-active .overlay {
        transform: translateX(50%);
    }

    .overlay__panel {
        align-items: center;
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: center;
        position: absolute;
        text-align: center;
        top: 0;
        transform: translateX(0);
        transition: transform 0.6s ease-in-out;
        width: 50%;
    }

    .overlay--left {
        transform: translateX(-20%);
    }

    .container.right-panel-active .overlay--left {
        transform: translateX(0);
    }

    .overlay--right {
        right: 0;
        transform: translateX(0);
    }

    .container.right-panel-active .overlay--right {
        transform: translateX(20%);
    }

    .btn {
        background-color: var(--blue);
        background-image: linear-gradient(90deg, var(--blue) 0%, var(--lightblue) 74%);
        border-radius: 20px;
        border: 1px solid var(--blue);
        color: var(--white);
        cursor: pointer;
        font-size: 0.8rem;
        font-weight: bold;
        letter-spacing: 0.1rem;
        padding: 0.9rem 4rem;
        text-transform: uppercase;
        transition: transform 80ms ease-in;
    }

    .form>.btn {
        margin-top: 1.5rem;
    }

    .btn:active {
        transform: scale(0.95);
    }

    .btn:focus {
        outline: none;
    }

    .form {
        background-color: var(--white);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 0 3rem;
        height: 100%;
        text-align: center;
    }

    .input {
        background-color: #fff;
        border: none;
        padding: 0.9rem 0.9rem;
        margin: 0.5rem 0;
        width: 100%;
    }

    @keyframes show {

        0%,
        49.99% {
            opacity: 0;
            z-index: 1;
        }

        50%,
        100% {
            opacity: 1;
            z-index: 5;
        }
    }
</style>
<body class="login-bg">
<div class="container right-panel-active">
    <!-- Sign Up -->
    <div class="container__form container--signup">
        <form action="#" class="form" id="form1">
            <h2 class="form__title">hello,戴皮~~~~</h2>
            <!--            <input type="text" placeholder="User" class="input" />-->
            <!--            <input type="email" placeholder="Email" class="input" />-->
            <!--            <input type="password" placeholder="Password" class="input" />-->
            <!--            <button class="btn">Sign Up</button>-->
        </form>
    </div>

    <!-- Sign In -->
    <div class="container__form container--signin">
        <form method="post" th:action="@{/dologin}" class="form" id="form2">
            <h2 class="form__title">Sign In</h2>
            <input name="username" type="text" placeholder="Username" class="input" />
            <input name="password" type="password" placeholder="Password" class="input" />
            <a href="#" class="link">Forgot your password?</a>
            <!--            <input class="btn" value="Sign In" lay-submit lay-filter="login" style="width:100%;" type="submit">-->
            <button class="btn" type="submit">Sign In</button>
        </form>
    </div>
    <!--<div class="login">-->
    <!--    <div class="message">系统登录</div>-->
    <!--    <div id="darkbannerwrap"></div>-->
    <!--    <form method="post" th:action="@{/dologin}" class="layui-form">-->
    <!--        <input name="username" placeholder="用户名" type="text" lay-verify="required" class="layui-input">-->
    <!--        <hr class="hr15">-->
    <!--        <input name="password" lay-verify="required" placeholder="密码" type="password" class="layui-input">-->
    <!--        <hr class="hr15">-->
    <!--        <input value="登录" lay-submit lay-filter="login" style="width:100%;" type="submit">-->
    <!--        <hr class="hr20">-->
    <!--&lt;!&ndash;        <input type="checkbox" name="remember-me" checked="checked">记住我&ndash;&gt;-->
    <!--    </form>-->
    <!--</div>-->
    <!-- Overlay -->
    <div class="container__overlay">
        <div class="overlay">
            <div class="overlay__panel overlay--left">
                <button class="btn" id="signIn">Sign In</button>
            </div>
            <div class="overlay__panel overlay--right">
                <button class="btn" id="signUp">Sign Up</button>
            </div>
        </div>
    </div>
</div>

<script>
    const signInBtn = document.getElementById("signIn");
    const signUpBtn = document.getElementById("signUp");
    const fistForm = document.getElementById("form1");
    // const secondForm = document.getElementById("form2");
    const container = document.querySelector(".container");

    signInBtn.addEventListener("click", () => {
        container.classList.remove("right-panel-active");
    });

    signUpBtn.addEventListener("click", () => {
        container.classList.add("right-panel-active");
    });

    fistForm.addEventListener("submit", (e) => e.preventDefault());
    // secondForm.addEventListener("submit", (e) => e.preventDefault());

</script>

<script>
    // layui.use(['form'],
    // function() {
    //     $ = layui.jquery;
    //     var form = layui.form(),
    //     layer = layui.layer;
    //
    //     //监听提交
    //     form.on('submit(login)',
    //     function(data) {
    //         //alert(1);
    //         /*console.log(data);*/
    //         layer.alert(JSON.stringify(data.field), {
    //           title: '点击确定进入后台'
    //         },function  () {
    //             location.href = "./index.html";
    //         })
    //         return false;
    //     });
    //
    // });

</script>


<!-- 底部结束 -->

</body>
</html>